<!--侧边抽屉栏 独立路由，修改标题路由时候需要单独修改-->
<script setup lang="ts">
const { setLocale, tm } = useI18n();
import { storeToRefs } from "pinia";

const userStore = useUserPinia();
const { drawer } = storeToRefs(userStore);
/**
 * 路由跳转
 * @param link 路由
 */
const toPage = async (link: String) => {
  await navigateTo(link);
};

/**
 * 响应式i18n
 */
const items = computed(() => {
  return tm("shop.appBar.title");
});
</script>
<template>
  <v-navigation-drawer v-model="drawer" location="left" temporary>
    <!--标题-->
    <v-list>
      <div v-for="(item, index) in items" :key="'iem-' + index">
        <v-list-item
          @click="
            item.children && item.children.length > 0 ? null : toPage(item.link)
          "
        >
          <v-list-item-title class="text-[#333333]">{{
            item.name
          }}</v-list-item-title>
        </v-list-item>
        <div
          v-if="item.children && item.children.length > 0"
          style="padding-left: 20px"
        >
          <v-list-item
            v-for="(child, jindex) in item.children"
            :key="'xj-' + index + jindex"
            @click="toPage(child.link)"
          >
            <v-list-item-title class="text-[#333333]">{{
              child.name
            }}</v-list-item-title>
          </v-list-item>
        </div>
      </div>
    </v-list>
  </v-navigation-drawer>
</template>

<style scoped>
</style>